<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>FB</title>
<script type="text/javascript"  src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/sjcl.js"></script>
<script type="text/javascript" src="js/initclient.js"></script>
<script type="text/javascript" src="js/client.js"></script>
<script type="text/javascript" src="js/gapimethods.js"></script>
<link rel="Stylesheet" type="text/css" href="css/base.css" />
<link rel="Stylesheet" type="text/css" href="css/fb-buttons.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>

<!-- http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/ -->
<body>
  <form id="base">
    <!--INPUT TEXT FOR GLOBAL VARIABLES-->
    <div style="position:absolute;bottom:100px;right:100px;border:1px dashed #000000;padding:20px" >
		<div style="float:left"><a href="https://apis-explorer.appspot.com/apis-explorer/?base=https%3A%2F%2Fshhbjb.appspot.com%2F_ah%2Fapi#p/" target="_blank">APIEXPLORER</a></div>
		<div style="float:right"><a href="https://appengine.google.com/datastore/explorer?&app_id=s~shhbjb&version_id=4.371620935337607336" target="_blank">DATASTORE</a></div>
	    <table>
		   <tr><td>merchantId</td><td><input type="text" id="jbMerchantId" value="1" style="width: 300px" /></td></tr>
		    <tr><td>stepvalue</td><td><input type="text" value="0" id="stepvalue" style="width: 300px" /></td></tr>
		    <tr><td>FBid</td><td><input type="text" value="0" id="fbid" style="width: 300px" /></td></tr>
		    <tr><td>firstName</td><td><input type="text" value="0" id="jbFirstName" style="width: 300px" /></td></tr>
		    <tr><td>lastName</td><td><input type="text" value="0" id="jbLastName" style="width: 300px" /></td></tr>
		    <tr><td>emailAddress</td><td><input type="text" value="0" id="jbEmailAddress" style="width: 300px" /></td></tr>
		    <tr><td>userName</td><td><input type="text" value="0" id="jbUserName" style="width: 300px" /></td></tr>
		    <tr><td>JBLogo</td><td><input type="text" value="jblogo" id="jblogo" style="width: 300px" /></td></tr>
		    <tr><td>imageUrl</td><td><input type="text" value="" id="jbImageUrl" style="width: 300px" /></td></tr>
		    <tr><td>messageLink</td><td><input type="text" value="" id="jbMessageLink" style="width: 300px" /></td></tr>
		    <tr><td>boardId</td><td><input type="text" id="jbBoardId" value="1" style="width: 300px" /></td></tr>
		    <tr><td>userId</td><td><input type="text" value="0" id="jbUserId" style="width: 300px" /></td></tr>
		    <div id="ArticlesHolder"></div>
    	</table>
    	    <a id="activator" class="uibutton confirm large special"">click Me</a>
    </div>
    <!--/-->


    <div class="overlay" id="overlay" style="display: none;"></div>
    
    <div class="fancybox" id="jbbox0">
      <a class="fancyboxclose" id="boxclose0"></a>
      <h1>Poll your friends</h1>
      <div id="mainBody0" class="pageContentItem">
        <table>
          <tr>
            <td>
              <div class="controlPlaceHeader">
                <div id="imageHolder0" class="imageHolder sidebyside margined">
                  <img src="" height="220px" alt="" class="imageRef" width="180px" />
                </div>
                <div id="contentHolder2" class=" sidebyside"
                  style="height: 100px; width: 300px;">
                  <div class="margined">Include a Message:</div>
                  <div>
                    <div class="margined">
                      <textarea id="conversationText" rows="10" cols="55" class="input-text"></textarea>
                    </div>
                    <div class="margined ">
                      <div class="fb-login-button sidebyside" scope="email,user_checkins" onlogin="loggedin();goNext();"  data-size="medium" >Login</div>
                        <div ><a href="#" class="sidebyside uibutton">Google</a></div>
                        <div ><a href="#" class="sidebyside uibutton">Twitter</a></div>
                        <div ><a href="#" class="sidebyside uibutton">Yahoo</a></div>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div></div>
            </td>
          </tr>
        </table>
      </div>
      <div id="footer0" class="footerdialog">
        <ul>
          
        </ul>
      </div>
    </div>

    <div class="fancybox" id="jbbox1">
      <a class="fancyboxclose" id="boxclose1"></a>
      <h1>Who do you want to poll?</h1>
      <div id="mainbody1" class="pageContentItem">
        <div >
          <span style="padding-right:10px;">Search:</span><input type="text" id="txtSearchFriends" class="sfield"/><img src="images/Search.png" id="search-button">
        </div>
        <div id="contentHolder1">
          <div id="facebookFriendList" class="oveflowdiv box boardlist" style="height: 150px">
          	<ul id="facebookFriendListUl" class="list"></ul>
          </div>
        </div>
        <div id="selectedFriends" class="oveflowdiv box " style="height:50px"></div>
      </div>
      <div id="footer1" class="footerdialog">
        <ul>
          <li id="nextAfterPoll" class="inRow uibutton large" >Next</li>
        </ul>
      </div>
    </div>

    <div class="fancybox" id="jbbox2">
      <a class="fancyboxclose" id="boxclose2"></a>
      <h1>Not sure about it? Ask your friends.</h1>
      <div id="mainbody2" class="pageContentItem">
        <table>
          <tr>
            <td>
              <div id="imageHolder2" class="imageHolder  sidebyside">
                <img src="" width="180px" height="220px" alt="" class="imageRef" />
              </div>
              <div id="contentHolder2" class="sidebyside" style="height: 220px; width: 350px;">
                <div class="margined">Friends which you selected:</div>
                <div>
                  <div class="margined box" style="height: 190px; width: 340px;">
                    <div class="margined finalSelectedFriends"></div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div id="footer2" class="footerdialog">
        <ul>
          <li id="sendConversion" class="inRow uibutton large special" style="display:none;">Send Message</li>
          <li id="sendNotification" class="inRow uibutton large special" >Send Notification</li>
        </ul>
      </div>
    </div>

    <div class="fancybox" id="jbbox3">
      <a class="fancyboxclose" id="boxclose3"></a>
      <h1>Thank You!</h1>
      <div id="mainbody3" class="pageContentItem">
        <table>
          <tr>
            <td>
              <div id="imageHolder3" class="imageHolder  sidebyside ">
                <img src="" width="180px" height="220px" alt="" class="imageRef" />
              </div>
              <div id="contentHolder3" class="sidebyside" style="height: 220px; width: 350px;">
                <div class="margined"><h2>Great! Your Question Has Been Sent</h2></div>
                <div>
                  <div class="margined box" style="height: 90px; width: 340px;">
                    <div id="greetingText" class="margined">
											<h3>We'll emial you when your friends reply.
											Need a professional opinion? Speak to our stylists.<br/> 
					                 		For fir and fashion advice at 1-000-000-0000.</h3>
										</div>
                  </div>
                  <div class="margined box" style="height: 65px; width: 340px;">
	                  <div>ASKING:</div>
	                  <div class="margined finalSelectedFriends"></div>
	                </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div id="footer3" class="footerdialog">
        <ul>
          <li id="backToMain" class=" uibutton large icon next ">Continue Shopping</li>
        </ul>
      </div>
    </div>

  </form>
</body>
</html>

